<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Record</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<!-- <link rel="stylesheet" type="text/css" href="css/main.css" /> -->
</head>

<body>
<style>
.calendar {
    width: 980px;
    margin: 0 auto;
}
.calendar ul, .calendar li {
    list-style: none;
    padding: 0;
    margin: 0;
}
.calendar .week-days li {
    /*display: inline-block;*/
    float: left;
    width: 100px;
    height: 30px;
    margin: 0 20px 30px 20px;
    text-align: center;
    font-size: 20px;
}

.calendar .days li {
    /*display: inline-block;*/
    float: left;
    width: 100px;
    margin: 0 20px 50px 20px;
    text-align: center;
    font-size: 20px;
    background: #fff;
}
.calendar .days .inner {
    position: relative;
    width: 80px;
    height: 80px;
    padding: 10px;
    border-radius: 50%;
    text-align: center;
    background: #ddd;
}
.calendar .days .background {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #fff;
}
.calendar .days em {
    position: absolute;
    top: 0;
    right: -20px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    line-height: 25px;
    font-size: 12px;
    font-style: normal;
    background: #ddd;
}

.calendar .days strong {
    line-height: 80px;
    font-size: 20px;
}
</style>
<div class="calendar" id="calendar"></div>

<script src="/js/jquery-2.1.0.min/index.js"></script>
<script src="/js/lib/sea.js"></script>
<script>
seajs.config({
    base: '/plan/js/',
    alias: {
      // 'jquery': '/js/jquery-2.1.0.min/index.js'
    }
});
seajs.use('main');
</script>
</body>
</html>